<script lang="ts" setup>
import { onMounted, reactive } from "vue";
import { showRemark } from "@/api/student/he/frontClass";
import { classFrontStore } from "@/stores/frontData/he/class";
import { getHMS } from "@/utils/time";

const store = classFrontStore();
let remark: any = reactive([[]]);
onMounted(() => {
  showRemark(store.classId, 5, 1).then((res) => {
    remark.splice(0, remark.length);

    if (res.data.msg == "请求成功") {
      remark.push(res.data.data);
      console.log(remark);
    }
  });
});
</script>
<template>
  <div>
    <el-scrollbar height="400px">
      <template v-for="item in remark[0]">
        <div
          style="
            width: 100%;
            height: 85px;
            outline: 1px solid rgb(235, 230, 230);
          "
        >
          <div
            style="
              width: 100px;
              height: 85px;
              /* outline: 1px solid red; */
              overflow: hidden;
              text-align: center;
              float: left;
            "
          >
            <div
              style="
                /* outline: 1px solid red; */
                width: 45px;
                height: 45px;
                margin: auto auto;
                margin-top: 10px;
                border-radius: 50%;
                overflow: hidden;
              "
            >
              <el-image
                style="width: 45px; height: 45px"
                :src="item.image"
                fit="fit"
              />
            </div>
            <div style="font-size: 14px; margin-top: 5px">
              {{ item.username }}
            </div>
          </div>
          <div
            style="
              /* outline: 1px solid red; */
              float: left;
              width: 80%;
              height: 85px;
              margin-left: 20px;
            "
          >
            <div
              style="
                height: 20px;
                width: 160px;
                /* outline: 1px solid red; */
                margin-top: 10px;
              "
            >
              <template v-for="xx in item.rating">
                <span
                  class="iconfont icon-star-full"
                  style="color: rgb(255, 200, 0)"
                ></span
                >&nbsp;
              </template>
            </div>
            <div style="margin-top: 10px; font-size: 14px; font-weight: bold">
              {{ item.content }}
            </div>
            <div style="margin-top: 7px; font-size: 12px">
              <span>已上课25分钟的评价</span>&nbsp;&nbsp;
              <span>{{ getHMS(item.createTime) }}</span>
            </div>
          </div>
        </div>
      </template>
    </el-scrollbar>
  </div>
</template>
